.mentions {
	font-size: 14px !important;
	line-height: initial;
}

.mentions--singleLine .mentions__control {
	display: inline-block;
	width: 130px;
}

.mentions--singleLine .mentions__highlighter {
	border: 2px inset transparent;
	padding: 1px;
}

.mentions--singleLine .mentions__input {
	border: 2px inset;
	padding: 1px;
}

.mentions--multiLine .mentions__control {
	font-size: 14px !important;
}

.mentions--multiLine .mentions__highlighter {
	border: 1px solid transparent;
	font-weight: 400;
	padding: 0;
}

.mentions--multiLine .mentions__highlighter span {
	overflow-wrap: anywhere;
}

.mentions--multiLine .mentions__input {
	border: 1px solid transparent;
	color: var(--color-gray-500);
	cursor: inherit;
	font-weight: 400;
	outline: 0;
	padding: 0;
}

/* We're doing this janky stuff because of https://github.com/signavio/react-mentions/issues/459 */
.mentions--multiLine .mentions__input[aria-readonly='true'] {
	caret-color: transparent;
}

.mentions__input::placeholder {
	color: #c8c7cb !important;
}

.mentions__suggestions__list {
	background: var(--color-primary-background);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--border-radius) !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	box-shadow: var(--box-shadow-3);
	max-height: 400px;
	max-width: 300px;
	overflow-y: auto;
	padding: var(--size-xSmall) var(--size-small);
}

.mentions__suggestions__item {
	padding: var(--size-xSmall) 12px;
}

.mentions__suggestions__item:not(:last-of-type) {
	border-bottom: 1px solid var(--color-gray-300);
}

.mentions__suggestions__item--focused {
	background: var(--color-gray-300);
}